<template>
    <div style="margin:20px auto;">
        <el-row justify="space-between">
            <el-col :span="3">
                <el-button color="#626aef" @click="isShowAdd = true">添加器械</el-button>
            </el-col>
            <el-col :span="9">
                <el-input v-model="searchText" style="width: 240px" size="large" placeholder="输入名称" suffix-icon="Search"
                    @change="searchMedicale()" />
            </el-col>
        </el-row>
    </div>
    <el-table :data="medicalList" style="width: 100%" max-height="530px" border stripe>
        <!-- <el-table-column prop="id" label="编号" /> -->
        <el-table-column label="序号" width="140" type="index" />
        <el-table-column prop="name" label="器械名称" />
        <el-table-column prop="validityperio" label="有效期" />
        <el-table-column prop="cleartime" label="最后消毒时间" />
        <el-table-column prop="unitprice" label="单价(元)" />
        <el-table-column label="状态" prop="status">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 1" type="danger">使用中</el-tag>
                <el-tag v-else-if="scope.row.status == 0" type="success">空闲中</el-tag>
                <el-tag v-else-if="scope.row.status == 2" type="warning">消毒中</el-tag>
                <el-tag v-else type="info">报废</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button type="primary" @click="isShowEdit = true, getUpdataMedical(scope.row)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="isShowEdit" label-width="auto" title="编辑" label-position="right" style="max-width: 400px">
        <el-from :model="updataMedicalone">
            <el-form-item label="器械名称">
                <el-input v-model="updataMedicalone.name" />
            </el-form-item>
            <el-form-item label="器械单价">
                <el-input-number :precision="2" :step="0.01" v-model="updataMedicalone.unitprice" />
            </el-form-item>
            <el-form-item label="&nbsp&nbsp&nbsp&nbsp有效期">
                <el-date-picker v-model="updataMedicalone.validityperio" type="date" value-format="YYYY-MM-DD"
                    :editable="false" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="器械状态">
                <el-radio-group v-model="updataMedicalone.status" size="small">
                    <el-radio-button label="空闲中" value=0 />
                    <el-radio-button label="使用中" value=1 />
                    <el-radio-button label="消毒中" value=2 />
                    <el-radio-button label="已报废" value=3 />
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit()">修改</el-button>
                <el-button @click="isShowEdit = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <el-dialog v-model="isShowAdd" label-width="auto" title="添加" label-position="right" style="max-width: 400px">
        <el-from>
            <el-form-item label="器械名称">
                <el-input v-model="newName" />
            </el-form-item>
            <el-form-item label="器械单价">
                <el-input-number :precision="2" :step="0.01" v-model="newPrice" />
            </el-form-item>
            <el-form-item label="&nbsp&nbsp&nbsp&nbsp有效期">
                <el-date-picker v-model="newValidity" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                    format="YYYY-MM-DD HH:mm:ss" :editable="false" placeholder="选择日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addMedical()">提交</el-button>
                <el-button @click="isShowAdd = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <el-backtop :right="100" :bottom="100" />
</template>

<script>
import { delMedical, medicalLists, updataMedical, saveMedical } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'
export default {
    data() {
        return {
            // 器械列表
            medicalList: [],
            // 编辑对话框展示
            isShowEdit: ref(false),
            // 添加对话框展示
            isShowAdd: ref(false),
            // 修改器械
            updataMedicalone: {},
            // 新增姓名
            newName: ref(''),
            // 新增有效期
            newValidity: ref(''),
            // 新增单价
            newPrice: ref(''),
            // 搜索条件
            searchText: ref(''),
        }
    },
    methods: {
        // 获取器械列表
        getList() {
            medicalLists().then(res => {
                this.medicalList = res.data.data
            })
        },
        // 浅拷贝修改对象
        getUpdataMedical(item) {
            this.updataMedicalone = Object.assign({}, item)
        },
        // 提交修改
        onSubmit() {
            console.log(this.updataMedicalone.validityperio + " 00:00:00");
            updataMedical({
                id: this.updataMedicalone.id,
                name: this.updataMedicalone.name,
                unitprice: String(this.updataMedicalone.unitprice),
                validityperio: String(this.updataMedicalone.validityperio + " 00:00:00"),
                status: this.updataMedicalone.status
            }).then(res => {
                if (res.data.data) {
                    this.dialogFormVisible = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 删除
        del(item) {
            delMedical({
                id: item,
            }).then(res => {
                if (res.data.data) {
                    ElMessageBox({
                        message: '删除成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '删除失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 添加
        addMedical() {
            saveMedical({
                name: this.newName,
                validityPerio: this.newValidity,
                unitPrice: this.newPrice,
            }).then(res => {
                if (res.data.data) {
                    this.isShowAdd = false;
                    setTimeout(2000),
                        ElMessageBox({
                            message: '添加成功',
                            type: 'success'
                        }).then(() => {
                            location.reload();
                        })
                } else {
                    this.isShowAdd = false;
                    ElMessageBox({
                        message: '添加失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 搜索
        searchMedicale() {
            medicalLists({ name: this.searchText }).then(res => {
                if (res.data.data.length > 0) {
                    this.medicalList = res.data.data;
                } else {
                    ElMessage({
                        message: '查无此信息',
                        type: 'error'
                    })
                    this.getList();
                }
            })
        }
    },
    mounted() {
        this.getList();
    }
}
</script>

<style></style>